<template>
  <div class="playerManage">
    <div class="operation_wrap">
      <div class="show_wrap">
        <div class="show_title">操作</div>
        <div class="show_btn_wrap">
          <div
            class="operation_show_item"
            v-for="(item, i) in list"
            :key="i"
            :class="{ active: current == i }"
            @click="operationClick(item, i)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="operation_btn_wrap">
        <el-button @click="handleAddPlayer" type="primary"
          >+ 添加选手</el-button
        >
        <!-- <el-button type="primary">+ 批量添加</el-button>
        <el-button type="primary">重置编号</el-button>
        <span>下载批量模板</span> -->
      </div>
    </div>

    <div class="header_table_wrap">
      <!-- 排序方式 -->
      <div class="item">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="cursor: pointer">
            {{ orderValue }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="handleOrder(item)"
              v-for="item in order"
              :key="item.value"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 显示/隐藏 -->
      <div class="item">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="cursor: pointer">
            {{ hiddenValue }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="handleHidden(item)"
              v-for="item in hidden"
              :key="item.value"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="item">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="cursor: pointer">
            {{ properyValue }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="handlePropery(item)"
              v-for="item in propery"
              :key="item.value"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="item searchItem">
        <el-input
          placeholder="选手编号、名称、简介"
          suffix-icon="el-icon-search"
          v-model="searchKey"
          @change="handleSearch"
        >
        </el-input>
      </div>
    </div>
    <div class="table_wrap">
      <el-table
        ref="playerList"
        :data="playerList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="选手" width="300">
          <template slot-scope="scope">
            <div class="player_title_wrap">
              <div class="img_wrap">
                <el-image
                  style="border-radius: 8px; width: 44px; height: 44px"
                  :src="
                    scope.row.coverType === 'IMAGE' && scope.row.coverLink
                      ? scope.row.coverLink
                      : require('../../../../../assets/images/cover.png')
                  "
                  fit="cover"
                ></el-image>
                <div class="eyes_wrap" v-if="!scope.row.enabled">
                  <el-image
                    style="width: 18px; height: 20px"
                    :src="require('../../../../../assets/images/forbid.png')"
                  ></el-image>
                </div>
                <div class="eyes_wrap" v-if="scope.row.hidden">
                  <el-image
                    style="width: 19px; height: 16px"
                    :src="require('../../../../../assets/images/eyes.png')"
                  ></el-image>
                </div>
              </div>
              <span class="number">{{ scope.row.number }}号</span>
              <span class="name">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="选手分组"
          align="center"
          v-if="groupList.length"
        >
          <template slot-scope="scope">
            <div>
              {{ filterGroup(scope.row.contestantGroupId) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="vc"
          label="票数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pv"
          label="浏览量"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-dropdown trigger="click" placement="bottom">
                <span style="font-size: 14px">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleEdit(scope.row)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleComent(scope.row)"
                    >添加评论</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="handleStatus(scope.row)"
                    :class="{ dropColor: !scope.row.enabled }"
                    >{{
                      scope.row.enabled ? "禁封选手" : "解禁选手"
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="handleShow(scope.row)"
                    :class="{ dropColor: scope.row.hidden }"
                    >{{
                      scope.row.hidden ? "显示选手" : "隐藏选手"
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleDelete(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="query.pageSize"
          :total="total"
          :current-page="query.pageNum"
          @current-change="handleChangePage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="type === 'add' ? '新增选手' : '编辑选手'"
      :visible.sync="addPlayerShow"
      width="700px"
      top="9vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      custom-class="addPlayer_s"
    >
      <!-- 加v-if="addPlayerShow"的目的是恢复滚动条的位置 -->
      <div class="addPlayer_wrap" v-if="addPlayerShow">
        <el-form :model="addPlayerForm" ref="addPlayerForm" label-width="90px">
          <el-form-item
            v-if="groupList.length"
            label="选手分组"
            prop="name"
            :rules="{
              required: true,
              message: '请填写',
              trigger: 'blur',
            }"
          >
            <el-select
              v-model="addPlayerForm.contestantGroupId"
              placeholder="请选择"
              style="width: 300px"
            >
              <el-option
                v-for="item in groupList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="选手名称"
            prop="name"
            :rules="{
              required: true,
              message: '请填写',
              trigger: 'blur',
            }"
          >
            <el-input
              maxlength="64"
              style="width: 300px"
              v-model="addPlayerForm.name"
              placeholder="请输入选手名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="选手简介">
            <el-input
              style="width: 300px"
              maxlength="128"
              v-model="addPlayerForm.introduction"
              placeholder="请输入选手简介，最长128个字"
            ></el-input>
          </el-form-item>
          <el-form-item label="选手图片">
            <div style="width: 300px">
              <upload
                @handleSuccess="handleSuccess"
                type="OTHER"
                custom="default"
                :multiple="true"
                :fileList="addPlayerForm.imageLink"
              ></upload>
            </div>
          </el-form-item>
          <el-form-item label="选手详情">
            <div class="player_detail_wrap">
              <div class="outline_wrap">
                <el-checkbox v-model="checked">外部链接</el-checkbox>
                <div v-if="checked">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    style="width: 300px"
                    placeholder="请输入选手详情链接"
                    v-model="addPlayerForm.details"
                  >
                  </el-input>
                </div>
              </div>
              <el-row class="row_wrap" v-if="!checked">
                <el-col :span="24" class="introduce_wrap">
                  <div class="editor_box">
                    <ueEditor
                      v-model="addPlayerForm.details"
                      @change="desChange"
                      :height="198"
                      :temp="temp"
                    ></ueEditor>
                  </div>
                  <div class="temp_box">
                    <div class="temp_head">活动简介模板</div>
                    <ul class="temp_list">
                      <li
                        class="temp_item"
                        v-for="(item, index) in tempList"
                        :key="index"
                        @click="handleSelectTemp(item)"
                        :class="{ active: tempId === item.id }"
                      >
                        <div class="textS" v-html="item.text"></div>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
              <!-- <div v-if="!checked">
                <ueEditor
                  v-model="addPlayerForm.details"
                  @change="desChange"
                  :height="400"
                  :temp="temp"
                ></ueEditor>
              </div> -->
            </div>
          </el-form-item>
          <el-form-item
            v-for="(item, index) in addPlayerForm.contestantAttributeValues"
            :key="item.id"
            :label="item.name"
            :prop="'contestantAttributeValues.' + index + '.value'"
            :rules="{
              required: item.required,
              message: '请填写',
              trigger: 'blur',
            }"
          >
            <!-- 上传文件，先不考虑文件上传，因为上传接口的type有限制，与后端沟通后再说 -->
            <template v-if="item.type === 'INPUT_FILE'">
              <div style="width: 300px">
                <upload
                  @handleSuccess="handleSuccess1($event,index)"
                  type="OTHER"
                  custom="default"
                  :multiple="true"
                  :fileList="addPlayerForm.contestantAttributeValues[index].value"
                ></upload>
              </div>
            </template>
            <!-- 区域文本 -->
            <template v-if="item.type === 'TEXT_AREA'">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入"
                v-model="item.value"
                style="width: 300px"
                :rows="3"
              >
              </el-input>
            </template>
            <!-- 文本 -->
            <template v-if="item.type.indexOf('INPUT_TEXT') != -1">
              <el-input
                style="width: 300px"
                v-model="item.value"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-form-item>

          <el-form-item>
            <div class="player_btn_wrap">
              <el-tooltip
                class="item"
                effect="dark"
                content="保存当前内容并关闭弹窗"
                placement="bottom"
              >
                <el-button
                  type="primary"
                  @click="handlePlayer('addPlayerForm')"
                  :plain="type === 'add'"
                  >{{ type === "add" ? "添加" : "保存" }}</el-button
                >
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="保存当前内容并添加下一个选手"
                placement="bottom"
                v-if="type === 'add'"
              >
                <el-button
                  @click="handleGoOnAddPlayer('addPlayerForm')"
                  style="margin-left: 20px"
                  type="primary"
                  >继续添加</el-button
                >
              </el-tooltip>
            </div>
          </el-form-item>
        </el-form>

        <div class="cover_wrap">
          <el-radio-group
            v-model="addPlayerForm.coverType"
            @change="handleChangeCoverType"
          >
            <el-radio label="IMAGE">图片封面</el-radio>
            <el-radio label="VIDEO">视频封面</el-radio>
          </el-radio-group>
          <div class="cover_img" v-if="addPlayerForm.coverType === 'IMAGE'">
            <upload
              @handleSuccess="handleSuccessCover"
              type="OTHER"
              custom="cover"
              :imageUrl="addPlayerForm.coverLink"
            />
          </div>
          <div class="cover_video" v-if="addPlayerForm.coverType === 'VIDEO'">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              style="width: 250px; margin-top: 20px"
              placeholder="请输入视频链接"
              v-model="addPlayerForm.coverLink"
            >
            </el-input>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="新增评论"
      :visible.sync="commentShow"
      width="550px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <div>
        <el-form
          :model="commentForm"
          :rules="rulesComment"
          ref="commentForm"
          label-width="120px"
          class="demo-ruleForm"
          label-position="left"
          :hide-required-asterisk="true"
        >
          <el-form-item label="活动名称">
            <div>{{ actDetails.title }}</div>
          </el-form-item>
          <el-form-item label="选手名称">
            <div>{{ currentPlayer.name }}</div>
          </el-form-item>
          <el-form-item label="评论昵称" prop="userNickname">
            <el-input
              style="width: 300px"
              v-model="commentForm.userNickname"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="评论头像" prop="userPhotoLink">
            <upload
              :imageUrl="commentForm.userPhotoLink"
              @handleSuccess="handleSuccessuserPhotoLink"
              type="OTHER"
              custom="custom"
              :styleObject="{ width: '100px', height: '100px' }"
              :showSizeTips="false"
            ></upload>
          </el-form-item>
          <el-form-item label="评论内容" prop="content">
            <el-input
              type="textarea"
              :rows="4"
              style="width: 300px"
              placeholder="请输入内容"
              v-model="commentForm.content"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="评论时间">
            <el-date-picker
              v-model="commentForm.createdTime"
              type="datetime"
              style="width: 300px"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <div>
              <el-button>取消</el-button>
              <el-button
                @click="handleConfirm"
                style="margin-left: 40px"
                type="primary"
                >确定</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload from "@/components/upload";
import ueEditor from "@/components/ueEditor";
import { formatDate } from "@/utils/filter";
import cfg from "@/config";
import { tempList } from "@/utils/data";
export default {
  components: {
    upload,
    ueEditor,
  },
  data() {
    return {
      cfg,
      current: 0,
      tempList,
      list: [
        { name: "显示", value: "false" },
        // { name: "隐藏", value: "true" },
        // { name: "删除", value: "DELETE" },
      ],
      order: [
        //排序方式
        {
          name: "编号正序",
          value: "NUMBER_ASC",
        },
        {
          name: "编号倒序",
          value: "NUMBER_DESC",
        },
        {
          name: "票数正序",
          value: "VC_ASC",
        },
        {
          name: "票数倒序",
          value: "VC_DESC",
        },
      ],
      orderValue: "排序方式",
      propery: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "封面无链接",
          value: "COVER_LINK_NONE",
        },
        {
          name: "封面有链接",
          value: "COVER_LINK",
        },
        {
          name: "禁用选手",
          value: "ENABLED",
        },
        {
          name: "无简要介绍",
          value: "INTRODUCTION_NONE",
        },
        {
          name: "有简要介绍",
          value: "INTRODUCTION",
        },
        {
          name: "无详细介绍",
          value: "DETAILS_NONE",
        },
        {
          name: "有详细介绍",
          value: "DETAILS",
        },
      ],
      properyValue: "其他筛选",
      hidden: [
        {
          name: "全部",
          value: null,
        },
        {
          name: "显示",
          value: false,
        },
        {
          name: "隐藏",
          value: true,
        },
      ],
      hiddenValue: "全部",
      query: {
        hidden: null, //null代表全部，true代表隐藏，false代表显示
        introduction: "", //根据选手简介搜索
        name: "", //根据选手名称搜索
        number: "", //根据选手编号搜索
        order: "", //NUMBER_ASC表示编号正序,NUMBER_DESC表示编号倒序，VC_ASC表示票数正序，VC_DESC表示票数倒序
        pageNum: 1,
        pageSize: 5,
        propery: "", //COVER_LINK_NONE表示封面无连接,COVER_LINK表示封面有链接，ENABLED表示禁用的选手，INTRODUCTION_NONE表示无简要介绍，INTRODUCTION表示有简要介绍，DETAILS_NONE表示无详细介绍，DETAILS表示有详细介绍
        voteId: this.$route.query.id,
      },
      addPlayerShow: false,
      searchKey: "",
      addPlayerForm: {
        contestantAttributeValues: [
          // {
          //   contestantAttributeId: 0,//选手属性编号
          //   contestantId: 0,//选手编号
          //   value: "string",//值 大长度为4096个字符
          //   voteId: 0,
          // },
        ], //自己新增的表单数组
        contestantGroupId: 0, //选手组编号
        coverLink: "", //封面链接 最大长度为256个字符
        coverType: "IMAGE", //封面类型IMAGE, VIDEO
        details: "", //详情 最大长度为1024个字符
        detailsType: "TEXT", //详情类型,TEXT, LINK
        id: 0, //编号 创建时为空
        imageLink: [
          //图片链接 条目最大长度为512个字符
        ],
        introduction: "", //简介 最大长度为128个字符
        name: "", //名称 最大长度为64个字符
        number: 0, //编号 最大长度为32个字符
        voteId: Number(this.$route.query.id),
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      customForm: [], //自定义表单列表
      checked: false, //选手详情，是否选择外部链接
      playerList: [],
      total: 0,
      detetePlayerList: [],
      temp: "",
      type: "", //判断是编辑还是新增
      groupList: [],
      commentShow: false,
      commentForm: {
        content: "", //评论内容
        contestantId: "", //选手id
        createdTime: "", //评论时间
        userNickname: "", //评论昵称
        userPhotoLink: "", //评论头像
        voteId: Number(this.$route.query.id),
      },
      rulesComment: {
        userNickname: [
          { required: true, message: "请输入评论昵称", trigger: "blur" },
        ],
        userPhotoLink: [
          { required: true, message: "请上传头像", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入评论内容", trigger: "blur" },
        ],
      },
      currentPlayer: {},
      actDetails: {},
      tempId: "",
      copyList: [],
    };
  },
  created() {
    this.getPlayerList();
    this.getGroup();
    this.getActDetail();
  },
  methods: {
    //获取活动信息
    getActDetail() {
      this.$api("vote.actById", {
        id: this.$route.query.id,
      }).then((res) => {
        this.actDetails = res;
      });
    },
    filterGroup(id) {
      let item = this.groupList.find((item) => item.value == id);
      return item ? item.label : "无";
    },
    getGroup() {
      this.$api("player.getGroup", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        const arr = [];
        res.forEach((item) => {
          arr.push({
            value: item.id,
            label: item.name,
          });
        });
        this.groupList = arr;
      });
    },
    handleChangeCoverType() {
      this.addPlayerForm.coverLink = "";
    },
    //获取选手列表
    getPlayerList() {
      this.$api("player.getPlayerList", this.query).then((res) => {
        console.log(res);
        this.playerList = res.data;
        this.total = res.count;
      });
    },
    handleSuccess1(val,index){
      console.log(val)
      console.log(index)
      this.addPlayerForm.contestantAttributeValues[index].value=val
    },
    //获取自定义表单列表,自己添加了哪些表单
    getCustomForm(id) {
      this.$api("vote.getForm", {
        voteId: this.$route.query.id,
      }).then((res) => {
        const list = [];
        if (res.length) {
          if (id) {
            this.$api("player.getPlayerContestantById", {
              contestantId: id, //选手id
              voteId: Number(this.$route.query.id),
            }).then((ele1) => {
              console.log(ele1);
              res.forEach((item) => {
                if (!item.disabled) {
                  list.push({
                    contestantAttributeId: item.id, //属性id
                    contestantId: id, //选手id
                    value: item.type === "INPUT_FILE"?JSON.parse(ele1[item.code]):ele1[item.code],
                    voteId: Number(this.$route.query.id),
                    name: item.name,
                    type: item.type,
                    required: item.required,
                  });
                }
                this.addPlayerForm.contestantAttributeValues = list;
                console.log(this.addPlayerForm);
              });
              this.addPlayerShow = true;
            });
          } else {
            res.forEach((item) => {
               if (item.type === "INPUT_FILE") {
                  item.defaultValue = [];
                }
              if (!item.disabled) {
                list.push({
                  contestantAttributeId: item.id, //属性id
                  contestantId: 0, //选手id
                  value: item.defaultValue,
                  voteId: Number(this.$route.query.id),
                  name: item.name,
                  type: item.type,
                  required: item.required,
                });
              }
            });
            this.addPlayerForm.contestantAttributeValues = list;
            this.copyList = JSON.parse(JSON.stringify(list));
            this.addPlayerShow = true;
          }
        } else {
          this.addPlayerShow = true;
        }
      });
    },
    //点击添加选手
    handleAddPlayer() {
      this.addPlayerForm = {
        contestantAttributeValues: [],
        contestantGroupId: this.groupList.length ? this.groupList[0].value : 0,
        coverLink: "",
        coverType: "IMAGE",
        details: "",
        detailsType: "TEXT",
        id: 0,
        imageLink: [],
        introduction: "",
        name: "",
        number: 0,
        voteId: Number(this.$route.query.id),
      };
      this.temp = "";
      this.type = "add";

      this.getCustomForm();
    },
    operationClick(item, i) {
      console.log(item, i);
      if (this.detetePlayerList.length) {
        const arr = [];
        this.detetePlayerList.forEach((item) => {
          arr.push(item.id);
        });
        if (item.value === "DELETE") {
          this.$confirm("确认删除选手？", "删除选手", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$api("player.deletePlayers", {
                ids: arr,
              }).then((res) => {
                console.log(res);
                this.$store.commit("status/SET_URL", new Date().getTime());
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1000,
                });
                this.getPlayerList();
              });
            })
            .catch(() => {});
          //删除
        } else {
          //修改
          this.$api("player.upDatePlayers", {
            ids: arr,
            propery: "HIDDEN",
            value: item.value,
          }).then((res) => {
            console.log(res);
            this.$store.commit("status/SET_URL", new Date().getTime());
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1000,
            });
            this.getPlayerList();
          });
        }

        this.current = i;
      } else {
        this.$message.error({
          type: "error",
          message: "请先选择要操作的数据",
          duration: 1000,
        });
      }
    },
    //封禁/解封选手
    handleStatus(item) {
      console.log(item);
      this.$api("player.upDatePlayers", {
        ids: [item.id],
        propery: "ENABLED",
        value: !item.enabled,
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1000,
        });
        this.getPlayerList();
      });
    },
    //显示/隐藏
    handleShow(item) {
      this.$api("player.upDatePlayers", {
        ids: [item.id],
        propery: "HIDDEN",
        value: !item.hidden,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1000,
        });
        this.getPlayerList();
      });
    },
    //选手图片上传成功
    handleSuccess(list) {
      console.log(list, "list");
      this.addPlayerForm.imageLink = list;
    },
    //选手封面上传成功
    handleSuccessCover(url) {
      console.log(url, "handleSuccessCover");
      this.addPlayerForm.coverLink = url;
    },
    //选择模板
    handleSelectTemp(item) {
      this.tempId = item.id;
      this.temp = item.text;
    },
    desChange(val, item, index) {
      console.log(val);
      if (item) {
        this.addPlayerForm.contestantAttributeValues[index].value = val;
      } else {
        this.addPlayerForm.details = val;
        this.temp = val;
      }
    },
    // 继续添加
    handleGoOnAddPlayer(name) {
      this.handlePlayer(name, "continue");
    },
    handlePlayer(name, cont) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          //处理数据
          const arr1 = [];
          this.addPlayerForm.contestantAttributeValues.forEach((item) => {
            //这个地方不能去删，删了之后影响页面的数据和dom渲染
            //delete item.showVal;
            //delete item.name;
            //delete item.type;
            //delete item.required;
            //item.value = JSON.stringify(item.value);
            arr1.push({
              contestantAttributeId: item.contestantAttributeId,
              // contestantId: item.contestantId,
              value: item.type == 'INPUT_FILE'?JSON.stringify(item.value):item.value,
              // voteId: item.voteId,
            });
          });
          const arr2 = [];
          this.addPlayerForm.imageLink.forEach((item) => {
            arr2.push(item.url);
          });
          this.addPlayerForm.imageLink = arr2;
          console.log(this.addPlayerForm);
          this.$api("player.savePlayer", {
            ...this.addPlayerForm,
            contestantAttributeValues: arr1,
            contestantGroupId:
              this.addPlayerForm.contestantGroupId == "无分组"
                ? 0
                : this.addPlayerForm.contestantGroupId,
          }).then((res) => {
            console.log(res);
            //如果是继续添加就不隐藏dialog
            if (!cont) {
              this.addPlayerShow = false;
            }
            this.$store.commit("status/SET_URL", new Date().getTime());
            this.$message({
              message: "添加成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                //添加之后需要清空
                (this.addPlayerForm.contestantGroupId = this.groupList.length
                  ? this.groupList[0].value
                  : 0),
                  (this.addPlayerForm.coverLink = "");
                this.addPlayerForm.coverType = "IMAGE";
                this.addPlayerForm.details = "";
                this.addPlayerForm.detailsType = "TEXT";
                this.addPlayerForm.id = 0;
                this.addPlayerForm.imageLink = [];
                this.addPlayerForm.introduction = "";
                this.addPlayerForm.name = "";
                this.addPlayerForm.number = 0;
                this.addPlayerForm.voteId = Number(this.$route.query.id);
                this.temp = "";
                this.addPlayerForm.contestantAttributeValues = JSON.parse(
                  JSON.stringify(this.copyList)
                );
                console.log(this.addPlayerForm.contestantAttributeValues, "22");

                this.getPlayerList();
              },
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleOrder(item) {
      this.query.order = item.value;
      this.query.pageNum = 1;
      this.orderValue = item.name;
      this.getPlayerList();
    },
    handleHidden(item) {
      console.log(item);
      this.query.hidden = item.value;
      this.hiddenValue = item.name;
      this.query.pageNum = 1;
      this.getPlayerList();
    },
    handlePropery(item) {
      this.query.propery = item.value;
      this.properyValue = item.name;
      this.query.pageNum = 1;
      this.getPlayerList();
    },
    //编辑选手
    handleEdit(item) {
      this.type = "edit";
      console.log(item);
      //根据编号获取选手详情
      this.$api("player.getPlayerById", {
        id: item.id,
      }).then((res) => {
        console.log(res);
        this.addPlayerForm.contestantGroupId =
          res.contestantGroupId || "无分组";
        this.addPlayerForm.coverLink = res.coverLink;
        this.addPlayerForm.coverType = res.coverType;
        this.addPlayerForm.details = res.details;
        this.temp = res.details;
        this.addPlayerForm.detailsType = res.detailsType;
        this.checked = res.detailsType === "TEXT" ? false : true;
        this.addPlayerForm.id = res.id;
        const arr = [];
        JSON.parse(res.imageLink).forEach((item) => {
          arr.push({
            url: item,
          });
        });
        this.addPlayerForm.imageLink = arr;
        this.addPlayerForm.introduction = res.introduction;
        this.addPlayerForm.name = res.name;
        this.addPlayerForm.number = res.number;
        this.addPlayerForm.voteId = res.voteId;
      });
      console.log(this.addPlayerForm);
      this.getCustomForm(item.id);
    },
    handleChangePage(val) {
      console.log(val);
      this.query.pageNum = val;
      this.getPlayerList();
    },
    handleSelect(val) {
      console.log(val);
      this.detetePlayerList = val;
    },
    //搜索
    handleSearch() {
      this.query.name = this.searchKey;
      this.query.number = this.searchKey;
      this.query.introduction = this.searchKey;
      this.query.pageNum = 1;
      this.getPlayerList();
    },
    //添加评论
    handleComent(item) {
      this.currentPlayer = item;
      this.commentForm.createdTime = new Date();
      this.commentForm.contestantId = item.id;
      this.commentShow = true;
    },
    handleSuccessuserPhotoLink(link) {
      this.commentForm.userPhotoLink = link;
    },
    handleConfirm() {
      console.log(this.commentForm);
      this.$refs.commentForm.validate((valid) => {
        if (valid) {
          console.log({
            ...this.commentForm,
            createdTime: formatDate(
              new Date(this.commentForm.createdTime).getTime()
            ),
          });
          this.$api("comment.create", {
            ...this.commentForm,
            createdTime: formatDate(
              new Date(this.commentForm.createdTime).getTime()
            ),
          }).then((res) => {
            console.log(res);
            this.commentShow = false;
            this.$message({
              message: "添加成功",
              type: "success",
              duration: 1000,
              onClose: () => {
                this.commentForm = {
                  content: "", //评论内容
                  contestantId: "", //选手id
                  createdTime: "", //评论时间
                  userNickname: "", //评论昵称
                  userPhotoLink: "", //评论头像
                  voteId: Number(this.$route.query.id),
                };
              },
            });
          });
        } else {
          console.log(2);
          return false;
        }
      });
    },
    //删除选手
    handleDelete(item) {
      this.$confirm("确认删除选手？", "删除选手", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api("player.deletePlayers", {
            ids: [item.id],
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
            });
            this.getPlayerList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.playerManage {
  width: 900px;
  min-height: 550px;
  .addPlayer_wrap {
    position: relative;
    height: 764px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
      background: rgba(0, 0, 0, 0.1);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    .player_btn_wrap {
    }
    .cover_wrap {
      width: 250px;
      position: absolute;
      right: 22px;
      top: 0;
      z-index: 99;
      .cover_img {
        margin-top: 10px;
        width: 145px;
        height: 145px;
      }
    }
  }
  ::v-deep.addPlayer_s {
    .el-dialog__body {
      padding: 0;
      padding-right: 10px;
    }

    .row_wrap {
      .line {
        text-align: center;
      }
      .introduce_wrap {
        display: flex;
        height: 320px;
        .editor_box {
          flex: 1;
        }
        .temp_box {
          width: 200px;
          height: 100%;
          border: 1px solid #dcdfe6;
          background-color: #f5f6f8;
          box-sizing: border-box;

          .temp_head {
            width: 100%;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            text-align: center;
            border-bottom: 1px solid #dcdfe6;
          }
          .temp_list {
            overflow-y: auto;
            height: calc(100% - 34px);
            padding: 0 12px;
            &::-webkit-scrollbar {
              width: 4px;
            }
            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
              background: rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
              border-radius: 0;
              background: rgba(0, 0, 0, 0.1);
            }
            .temp_item {
              font-size: 14px;
              width: 100%;
              height: 92px;
              overflow: hidden;
              background: #fff;
              user-select: none;
              box-shadow: 0 1px 7px 0 rgb(0 0 0 / 7%);
              border-radius: 4px;
              cursor: pointer;
              padding: 10px;
              margin: 15px 0;
              border: 1px solid transparent;

              > div {
                color: #666;
                text-align: justify;
                white-space: pre-wrap;
                line-height: 1.6;
                zoom: 0.67733;
              }
              &:hover {
                border-color: $themeColor;
              }
              &.active {
                border-color: $themeColor;
              }
            }
          }
        }
      }
    }
  }

  .operation_wrap {
    .show_wrap {
      display: flex;
      align-items: center;
      .show_title {
        font-size: 15px;
        font-weight: bold;
      }
      .show_btn_wrap {
        margin-left: 30px;
        border-radius: 30px;
        background-color: #dbdbdb;
        // width: 200px;
        height: 30px;
        display: flex;
        color: #fff;
        font-weight: 600;
        .operation_show_item {
          width: 80px;
          font-size: 15px;
          flex: 1;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 30px;
          cursor: pointer;
        }
        .active {
          background-color: $themeColor;
        }
      }
    }
    .operation_btn_wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding-left: 60px;
      .el-button {
        margin-right: 15px;
        width: 160px;
        height: 30px;
        line-height: 0.5;
      }
      span {
        cursor: pointer;
        margin-left: 20px;
        line-height: 2;
        font-size: 14px;
        color: $themeColor;
        font-weight: 600;
      }
    }
  }
  .header_table_wrap {
    margin-top: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(235, 234, 234);
    .item {
      margin-right: 60px;
    }
    .searchItem {
      ::v-deep.el-input {
        ::-webkit-input-placeholder {
          color: rgb(163, 162, 162);
        }
        :-moz-placeholder {
          /* Firefox 18- */
          color: rgb(163, 162, 162);
        }
        ::-moz-placeholder {
          /* Firefox 19+ */
          color: rgb(163, 162, 162);
        }
        :-ms-input-placeholder {
          color: rgb(163, 162, 162);
        }
        .el-input__inner {
          padding: 0 20px;
          text-align: left;
          border: 1px solid #ccc;
          width: 200px;
        }
      }
    }
  }
  .table_wrap {
    padding: 5px 0 50px;
    .pagination_wrap {
      margin-top: 20px;
    }
    .player_title_wrap {
      display: flex;
      align-items: center;

      .img_wrap {
        position: relative;
        width: 44px;
        height: 44px;
        .eyes_wrap {
          position: absolute;
          left: 0;
          width: 100%;
          top: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .number {
        color: #999;
        margin-left: 10px;
      }
      .name {
        margin-left: 8px;
      }
    }
  }
}
.textS {
  ::v-deep img {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}
.editor_box {
  ::v-deep.w-e-text-container {
    img {
      display: block;
      width: auto;
      max-width: 100%;
      margin: 0 auto;
    }
    > section {
      width: 100% !important;
    }
  }
}

::v-deep.el-dropdown-menu {
  .dropColor {
    color: $themeColor !important;
  }
}
</style>